<template>

  <div>
    <div id="img_reg" style="margin-top: 0">
      <el-form ref="form" :model="form" label-width="80px" style="width: 30%;">
        <el-form-item style="color:white; background-color: #f1f5f3" label="邮箱：">
          <el-input placeholder="请输入邮箱" v-model="form.userEmail"></el-input>
        </el-form-item>
        <el-form-item style="color:white; background-color: #f1f5f3" label="用户名：">
          <el-input placeholder="请输入用户名" v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item style="color:white; background-color: #f1f5f3" label="密码：">
          <el-input placeholder="请输入密码" v-model="form.userPassword" show-password></el-input>
        </el-form-item>

        <div class="btn">
          <el-button class="btn2" type="primary" @click="onSubmit">立即注册</el-button>
          <el-button class="btn2" type="primary"><a href="/login" style="color:white;">前往登入</a></el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form:{
        userEmail:'',
        userName: '',
        userPassword:'',
      }
    }
  },
  methods: {
    send(){
      this.$http({
        url:"/cbug/user/register",
        method:"post",
        data:this.form
      }).then(res=>{
        if(res.data.resultCode === 1){
          alert("Failure!")
        }
        else{
          alert("Success!")
        }
      }).catch(err=>{
        alert("Server Error!")
      })
    },
    onSubmit() {

      // clean spaces in head and tail
      this.form.userName = this.form.userName.trim();
      this.form.userEmail = this.form.userEmail.trim();
      this.form.userPassword = this.form.userPassword.trim();

      // console.log(this.form)
      if(!this.form.userName){
        alert("昵称不能为空！")
      }
      else if(!this.form.userEmail){
        alert("邮箱不能为空！")
      }
      else if(this.form.userEmail.search(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/i)===-1){
        alert("邮箱格式错误！")
      }
      else if(!this.form.userPassword){
        alert("密码不能为空!")
      }
      else if(this.form.userPassword.length <6){
        alert("密码长度要大于6")
      }
      // 可以注册
      else{
        this.send()
      }
    }
  }
}
</script>

<style scoped>
*{
  padding:0;
  margin:0;
}
#img_reg{
  background-color:#c6e2ff;
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;

  display:flex;
  justify-content: center;
  align-items: center;
}

el-form-item{
  color:white;
  background-color: #f1f5f3;
}
.btn{
  width:100%;

  display:flex;
  justify-content: space-between;
  align-items: center;
}

.btn2{
  width:48%;
  height:40px;
  margin-top:10px;
}
</style>
